<template>
  <div style="width: auto;height: 350px;padding-top:20px; " id="echarts1">
  </div>
</template>

<script>
  import echarts from 'echarts'
  const colors = ['#5470C6', '#818181']
  export default {
    name: 'echarts1',
    data () {
      return {
        // option配置
        option: {
          color: colors,
          tooltip: {
            trigger: 'none',
            axisPointer: {
              type: 'cross'
            }
          },
          legend: {},
          grid: {
            top: 50,
            bottom: 50
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[1]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return (

                      '销售额  ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                    )
                  }
                }
              },
              // prettier-ignore
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            {
              type: 'category',
              axisTick: {
                alignWithLabel: true
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: colors[0]
                }
              },
              axisPointer: {
                label: {
                  formatter: function (params) {
                    return (
                      '销售额  ' +
                      params.value +
                      (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                    )
                  }
                }
              },
              // prettier-ignore
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '销售额(2022)',
              type: 'line',
              xAxisIndex: 1,
              smooth: true,
              color: [
                '#81dd55',
                '#1a91ff'
              ],
              emphasis: {
                focus: 'series'
              },
              data: [
                2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
              ]
            },
            {
              name: '销售额(2021)',
              type: 'line',
              smooth: true,
              emphasis: {
                focus: 'series'
              },
              data: [
                3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
              ]
            }
          ]
        }
      }
    },
    mounted () {
      this.echartsInit()
    },
    methods: {
      echartsInit () {
        // 在生命周期中挂载
        echarts.init(document.getElementById('echarts1')).setOption(this.option)
      }
    }
  }
</script>

<style scoped>

</style>
